<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortable Demo</title>

<script src="../jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery.dimensions.js"></script>

<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.sortable.js"></script>
<script type="text/javascript" src="../ui.sortable.ext.js"></script>

<style type="text/css">
body,html {
	margin: 0;
	padding: 0;
}

#container {
	width: 100%;
	z-index: 1;
}
.width33 .box { width: 33%; }
.width25 .box { width: 25%; }
.width20 .box { width: 20%; }

.hover { background: #fff; border: 1px dotted #333; }
.box {
	height: 100px;
	float: left;
}
.inner {
	border: 1px solid black;
	margin: 10px;
	height: 80px;
	background: #ddd;
}

.footer {
	position: fixed;
	z-index: 1000;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 30px;
	background: #333;
}
</style>
</head>
<body>

<div id='container'>
	<div class="box">
		<div class='inner'>
			<p>Box 1<p>
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 2
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 3
		</div>
	</div>
	
	<div class="box">
		<div class='inner'>
			Box 4
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 5
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 6
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 7
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 8
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 9
		</div>
	</div>
	<div class="box">
		<div class='inner'>
			Box 10
		</div>
	</div>
</div>

<div class='footer'>
	<button onclick="$('#container').removeClass().addClass('width33');">33%</button>
	<button onclick="$('#container').removeClass().addClass('width25');">25%</button>
	<button onclick="$('#container').removeClass().addClass('width20');">20%</button>
	<button onclick="addItems(100);">Add 100 items</button>
<div>





<script type="text/javascript">

function addItems(e) {
	for (var i = e - 1; i >= 0; i--){
		$('#container').append('<div class="box"><div class="inner">'+i+'</div></div>');
	};
}

$(window).bind("load",function(){

	$("#container").sortable({
		handle: 'p',
		revert: true,
		scroll: true,
		placeholder: 'hover', //the class te placeholder should have
		placeholderElement: '> div' //Due to IE's shitty rendering, we'll use a div/div combination to handle percentages with margins - now we want to use the contrains from the inner div of course
	});

});
</script>
</body>
</html>
